<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="assets/css/video-js.min.css" rel="stylesheet">
  <script src="assets/js/video.min.js"></script>
  <script src="assets/js/videojs-flash.min.js"></script>
  <script src="assets/js/EasyWasmPlayer.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #container {
      margin: 20px;
      padding: 10px;
      height: 30px;
      width: 600px;
    }

    #my-player {
      margin: 20px;
      padding: 10px;
      height: 600px;
      width: 800px;
    }

    #addr {
      padding: 5px;
      width: 80%;
    }

    .player {
      display: block;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div id="container">
    <label for="addr">地址: </label><input id="addr" type="text" name="addr" value="" />
    <button id="btnPlay">播放</button>
  </div>
  <div class="player">
    <span>VLC Player </span>
    <object id="my-player1" classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
      codebase="https://downloads.videolan.org/pub/videolan/contrib/win32/axvlc.cab" width="300" height="200" id="vlc"
      events="true">
      <param name="src" value="" />
      <param name="showDisplay" value="true" />
      <param name="autoLoop" value="false" />
      <param name="autoPlay" value="false" />
    </object>
  </div>
  <div class="player">
    <span>Quicktime Player </span>
    <OBJECT id="my-player5" classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' width="320" height="240"
      codebase='http://www.apple.com/qtactivex/qtplugin.cab'>
      <param name='src' value="">
      <param name='autoplay' value="true">
      <param name='controller' value="false">
      <param name='loop' value="false">
      <EMBED id="my-player5-1" src="" width="320" height="240" autoplay="true" controller="true" loop="false" bgcolor="#000000" pluginspage='http://www.apple.com/quicktime/download/'>
      </EMBED>
    </OBJECT>
  </div>
  <div class="player">
    <span>Video JS Player </span>
    <video id="my-player2" class="video-js" controls preload="auto">
    </video>
  </div>

  <!-- <div class="player">
    <span>Flv JS Player </span>
    <video id="my-player3" class="video-js" controls preload="auto"></video>
    </video>
  </div> -->
  <div class="player">
    <span>Easy Wasm Player </span>
    <div id="my-player4" class="video-js"></div>
    </video>
  </div>

  <script>

    var vlcPlayer = document.getElementById('my-player1');
    var videojsPlayer = videojs('my-player2', { techOrder: ['flash', 'html5'] });
    var easyWasmCallbackFun = function () {
      console.log(arguments)
    }

    // var videoElement = document.getElementById('my-player3');

    // 实例化播放器
    var easyWasmPlayer = new WasmPlayer(null, 'my-player4', easyWasmCallbackFun, { cbUserPtr: this, decodeType: "auto", openAudio: 1, BigPlay: false, Height: true });

    btnPlay.addEventListener('click', function (ev) {
      ev.preventDefault();

      vlcPlayer.getElementsByTagName('param')[0].src = addr.value;

      videojsPlayer.src(addr.value);
      videojsPlayer.play();

      // if (flvjs.isSupported()) {

      //   var flvPlayer = flvjs.createPlayer({
      //     type: 'flv',
      //     url: addr.value
      //   });
      //   flvPlayer.attachMediaElement(videoElement);
      //   flvPlayer.load();
      //   flvPlayer.play();
      // }

      // 调用播放
      easyWasmPlayer.play(addr.value, 1)

      document.getElementById('my-player5').getElementsByTagName('param')[0].src=addr.value;
      document.getElementById('my-player5-1').src=addr.value;

      videojs.log((new Date().getTime()) + '...playing.');
    })

  </script>

</body>

</html>